<template>
  <div class="navBarTopPage">
    <el-row type="flex" justify="space-between">
      <div class="timeInfo">{{ nowTime }}</div>

      <el-row type="flex">
        <ScreenFfull class="screenFfull"></ScreenFfull>

        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </span>

          <el-dropdown-menu slot="dropdown">
            <a
              target="_blank"
              href="https://blog.csdn.net/Polaris_best?type=blog"
            >
              <el-dropdown-item>CSDN</el-dropdown-item>
            </a>

            <el-dropdown-item divided @click.native="toLogout">
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { getInitTime } from '@/utils/utils.js'
import ScreenFfull from '@/components/ScreenFull/index'
import { List } from 'echarts'

export default {
  name: 'navBarTop',
  components: { ScreenFfull },
  props: {},
  data() {
    return {
      nowTime: null,
      showScreen: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.timer = window.setInterval(() => {
      setTimeout(() => {
        this.nowTime = getInitTime(new Date(), '-', '-', ' ', ':', ':')
      }, 0)
    })
  },
  mounted() {
    const d1 = ['11', '12']
    const d2 = ['31', '44']
    const d3 = [...d1, ...d2]
    console.log('d3', d3, d3.at(-1))

    const imgIds = []
    const list = [
      { i: 'zs1', data: 1 },
      { i: 'zs2', data: 2 },
      { i: 'zs3', data: 3 },
      { i: 'zs4', data: 4 },
    ]
    list.map((e) => {
      imgIds.push(e.data)
    })
    // console.log('imgIds', imgIds)
    // console.log('imgIds.toString', imgIds.join(','))
    // 监听页面全屏
    window.addEventListener('fullscreenchange', (e) => {
      if (Screenfull.showScreen) {
        this.showScreen = true
      } else {
        this.showScreen = false
      }
    })
  },
  methods: {
    handleCommand(e) {
      console.log('e', e)
    },

    toLogout() {
      // localStorage.clear()
      this.$router.push(`/login`)
      this.$store.commit('clearVuex')
      this.$store.commit('clearRouterChecked')
    },

    toFullScreen() {
      this.showScreen = !this.showScreen
      if (!Screenfull.enabled) {
        this.$message({
          message: 'Your browser does not work',
          type: 'warning',
        })
        return false
      }
      Screenfull.toggle()
    },
  },
  destroyed() {
    clearInterval(this.timer)
    this.nowTime = null
  },
}
</script>

<style scoped lang="scss">
.navBarTopPage {
  .el-row {
    padding: 0 20px;
    .timeInfo {
      color: #5fb8d2;
    }
    .el-dropdown {
      margin-left: 10px;
      .el-dropdown-link {
        cursor: pointer;
        // color: #409eff;
        color: #5fb8d2;
      }
    }
  }
}
a {
  text-decoration: none;
}
</style>
